<template>
  <div>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <chartbox>
          <template #main>
            <ChartOne />
          </template>
        </chartbox>
        <chartbox>
          <template #main>
            <ChartThree></ChartThree>
          </template>
        </chartbox>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <chartbox>
          <template #main>
            <ChartTwo />
          </template>
        </chartbox>
        <chartbox>
          <template #main>
            <ChartFour></ChartFour>
          </template>
        </chartbox>

      </section>
    </section>
  </div>
</template>

<script setup lang="ts">
import chartbox from "../../components/ItemPage.vue"
import ChartOne from "../../components/Itemone.vue";
import ChartTwo from "../../components/Itemtwo.vue";
import ChartThree from "../../components/Itemthree.vue";
import ChartFour from "../../components/Itemfour.vue";

</script>

<style lang="scss">
// 主体容器样式
.container {
  // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
  width: 100%;
  margin: 0 auto;
  background-color:rgb(197, 233, 233);
  display: flex;
  // 设置左中右的占比 但是不要忘了在父容器要设置flex

  .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>